<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ToDo API Client Demo</title>
		<link rel="stylesheet" type="text/css" href="/static/css/style.css">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
		<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
		<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
		<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
		<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
		<script src="/static/js/jquery.easytabs.js"></script>
		<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
		<!--<script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js">-->
	</head>
	<body>
	<div id="employeesbrowser">
	  <div id="employeesbrowser_searchbar">
	  </div>
	  <div id="employeesbrowser_employeeslist">
	  </div>
	</div>
	<!--
	<ul>
  <li class="active">
    <a href="#tab-1" class="active">Tab 1</a>
  </li><li>
  </li><li>
    <a href="#tab-2">Tab 2</a>
  </li>
</ul>
	-->
	<div id="employeeeditor" class="tab-container">
	  <ul class="tabs">
		<li class="tab"><a href="#employeeeditor_mainform">Osnovni podaci</a></li>
		<li class="tab"><a href="#employeeeditor_jobsform">Podaci o pozicijama</a></li>
		<li class="tab"><a href="#employeeeditor_educationform">Podaci o obrazovanju</a></li>
	  </ul>
	  <div id="employeeeditor_mainform">
	  </div>
	  <div id="employeeeditor_jobsform">
		Employee jobs
	  </div>
	  <div id="employeeeditor_educationform">
		Education form
	  </div>
	</div> <!-- end of employeeeditor-->
	<script>
	
	//globals
	g_jobsDict = {}
	g_currentEmployee = undefined;
	g_employeesList = {};
	g_jobsMenu = undefined;
	g_employeeJobsEditorTemplate = undefined;
	
	$(document).ready(function(e)
	{
	  console.log('document ready!');
	  $('#employeeeditor').easytabs();
	  $('#employeesbrowser').on('employeemodified', function(){getEmployees();});
	  getEmployees();
	  getJobs();
 	});
	function loadEmployee(employeeID)
	{
	  var jqxhr = $.get( "/pygem/api/v1.0/employees/" + employeeID, function(data)
	  {
		var employee = JSON.parse(data['employee']);
		g_currentEmployee = employee; // set currently selected employee
		
		// Employee basic data
		$.get('/static/js/templates/employee.html', function(template)
		{
		  var rendered = Mustache.render(template, employee);		  
		  $('#employeeeditor_mainform').html(rendered);
		}).fail(function(e){console.log(e);});
		
		// Employee Jobs
		$.get('/static/js/templates/employeejobs.html', function(template)
		{
		  //console.log(employee);
		  //employee['jobtypes'] = g_jobsList;
		  var rendered = Mustache.render(template, employee);
		  //console.log('jobs ' + rendered)
		  $('#employeeeditor_jobsform').html(rendered);
		  console.log('template employeejobs got!');
		}).fail(function(e){console.log(e);});
		
		//Employee education
		$.get('/static/js/templates/employeeeducation.html', function(template)
		{
		  //console.log(employee);
		  var rendered = Mustache.render(template, employee);
		  //console.log('jobs ' + rendered)
		  $('#employeeeditor_educationform').html(rendered);
		  console.log('template employee education got!');
		}).fail(function(e){console.log(e);});

	  }).fail(function(e)
		{
		  //alert("fail!");
		  console.log(e);
		});
	}
	function getEmployees()
	{
		var jqxhr = $.get( "/pygem/api/v1.0/employees", function(data)
		{
		  var employees = JSON.parse(JSON.stringify(data['employees']));
		  var employeesList = [];
  
		  $.each(employees, function (key, value) {
			employee = JSON.parse(value);
			employeesList.push(employee);
			g_employeesList[key] = employee; // set the global variable
			});

		  employeesDict = {'employees': employeesList}
		  
		  $.get('/static/js/templates/employeesbrowser_list.html', function(template)
		  {
		    var rendered = Mustache.render(template, employeesDict);
		    console.log('employeebrowswer_list downloaded!')
			//console.log(employeesList);
			//console.log(rendered);
		    $('#employeesbrowser_employeeslist').html(rendered);
		  }).fail(function(e){console.log('can not get employeebrowser_list.mst');});
		  })
		  .done(function() {

		  })
		  .fail(function() {
			alert( "error" );
		  })
		  .always(function() {

		  });
	}
	function getJobs()
	{
	  $.get("/pygem/api/v1.0/jobs", function(data)
	  {
		j = JSON.parse(JSON.stringify(data['jobs']));
		//console.log(j)
		$.each(j, function(key,value)
		{
		  //console.log(key + ' '  + value);
		  //jobtype = JSON.parse(value);
		  g_jobsDict[key] = value
		});		
	  })
	  .done(function()
	  {
	  });
	}
	</script>
	<script src="/static/js/functions.js"></script>
	<script src="/static/js/templates.js"></script>
	</body>
</html>